<template>
    <div id="more-lines" ref="canvas" class="canvas-line" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts';
import {
  TitleComponent,
  type TitleComponentOption,
  ToolboxComponent,
  type ToolboxComponentOption,
  TooltipComponent,
  type TooltipComponentOption,
  GridComponent,
  type GridComponentOption,
  LegendComponent,
  type LegendComponentOption
} from 'echarts/components';
import { LineChart, type LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | ToolboxComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | LineSeriesOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById('more-lines')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        title: {
            show: false,
            text: 'Stacked Line'
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#2758c3',
            borderColor: '#2758c3', 
            textStyle: {
                color: '#ffffff',
                fontSize: 12
            }
        },
        legend: {
            show: true,
            data: props.data.seriesDataList.map(m => m.name),
            top: '5%',
            right: '2%',
            textStyle: {color: '#fff'},
        },
        grid: {
            top: '20%',
            left: 10,
            right: 10,
            bottom: 5,
            containLabel: true
        },
        toolbox: {
            show: false,
            feature: {
                saveAsImage: {} // 保存为img
            },
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.data.xAxisDataList,
            nameTextStyle: {
                color: '#a2d4f2',
                align: 'right',
                lineHeight: 26,
                fontWeight: 600,
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#4ef672'
                }
            },
            axisLabel: {
                show: true,
                color: '#1793df',
                formatter: function (value) { return value; }
            },
            splitLine:{show: true, lineStyle:{color: '#183c6d'}},
        },
        yAxis: {
            type: 'value',
            name: "业务量（单位：笔）",
            nameTextStyle: {
                color: '#a2d4f2',
                align: 'left',
                // lineHeight: 26,
                fontSize: 12,
            },
            boundaryGap: ['0', '0'],
            splitNumber: 5,
            axisLabel: {
                show: true,
                color: '#1793df'
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#183c6d'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#183c6d'
                }
            },
            splitLine:{show: true, lineStyle:{color: '#183c6d'}},
        },
        series: props.data.seriesDataList
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
.canvas-line {
    width: 100%;
    min-height: 200px;
}
.blue {
    color: #0000ff;
}
</style>
